<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="铅山区域公用品牌图片" class="left-image" />
        <img :src="imageUrls[1]" alt="生成区域公用品牌图片" class="left-image" />
      </div>

      <DynamicFlowEconomyComponent
          :title="'培养铅山区域公用品牌'"
          :content="[
'加快探索出台铅山生态产品认证管理办法，统一评价依据、认证规则、标志标识及发布标准，形成标准化认证体系。同时，深化品牌策划与营销创新，构建 “区域公用品牌为引领、企业品牌为支撑、产品品牌为基础” 的三级品牌矩阵，以品牌价值赋能生态产品实现增值溢价，全面增强市场竞争力。 构建准入退出、溯源品控、品牌授权三大机制，形成“母子品牌”矩阵：母品牌聚焦形象与标准，子品牌突出企业个性，既共享溢价又分散风险。产业端依托龙头企业、农民合作社与科研院所共建示范基地，统一品种、投入品与工艺，把品质做成“硬通货”。数字化方面，推广区块链溯源、卫星遥感监测和电商大数据反馈，让每一批次产品都有“身份证”，每一次消费都能沉淀用户画像。市场端则借力农博会、短视频、跨境电商，讲好“山水、人文、乡愁”故事，打造沉浸式体验。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/25115755.jpg',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E5%8C%BA%E5%9F%9F%E5%85%AC%E7%94%A8%E5%93%81%E7%89%8C%E5%9B%BE%E7%89%87%20%283%29.png'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '铅山区域公用品牌图片' : '生成区域公用品牌图片';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
